<template>
	<view>
		<view v-if="userInfo.username" class="userInfo">
			<view class="top">
				<image src="../../static/西瓜.png" mode="widthFix"></image>
				<text>{{userInfo.nickName}}</text>
			</view>
			<van-notice-bar scrollable speed='100' color="#1989fa" background="#ecf9ff" left-icon="info-o"
				text="欢迎使用西瓜记账小程序 , 感谢支持" />
			<view class="bottom">
				<van-cell @click="goInfo" title="我的信息" icon="manager-o" is-link />
				<van-cell @click="goSetting" title="设置" icon="setting-o" is-link />
			</view>
		</view>
		<view v-else class="toLogin">
			<van-empty description="您还没有登录,请立即登录" />
			<view class="btn">
				<van-button type="primary" size="large" @click="goLogin">登录</van-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {

			};
		},
		onLoad() {
			console.log("看是否存在用户信息",this.userInfo);
			// 执行获取cate数据的方法
			this.getCate()
		},
		computed: {
			...mapState('m_user', ['userInfo']),
			...mapState('m_cate', ['cateList']),
		},
		methods: {
			...mapMutations('m_cate', ['updateCateList']),
			// 我的信息
			goInfo() {
				console.log("点击了我的信息");
				uni.navigateTo({
					url: '../../subpkg/my-info/my-info'
				});
			},
			// 设置
			goSetting() {
				console.log("点击了设置");
				uni.navigateTo({
					url: '../../subpkg/my-setting/my-setting'
				});
			},
			// 如果没有登录,点击登录
			goLogin() {
				uni.navigateTo({
					url: '../login/login'
				});
			},
			// 获取分类
			async getCate(){
				const {data: res} = await uni.$http.get("/cate/findCate")
				this.updateCateList(res.data)
				console.log(res);
			}
		}
	}
</script>

<style lang="scss">
	.userInfo {
		height: 100vh;

		.top {
			height: 200px;
			background-color: #38A678;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 100px;
			}
		}
	}

	.toLogin {

		.btn {

			text-align: center;

			button {
				width: 90%;
			}
		}
	}
</style>
